<template>
	<view class="yt-txl-container">
		<view class="search">
			<input type="text" @input="inputFunc" class="s-input" placeholder="搜索" @blur="getold" />
		</view>
		<view class="scroll" :style="index ? '' :'right:25upx'">
			<scroll-view :scroll-into-view="to" scroll-y style="width: 100%;height: 100%;">
					<checkbox-group @change="checkboxChange" >
						<view @click="clickFunc(item)" v-for="(item,index) in hyList" class="info" :key="index">
							<label class="uni-list-cell uni-list-cell-pd info" >
								<checkbox :value="item.account" :checked="item.checked"/>
								<view class="icon">
									<image :src="item.avatar" mode="" style="width: 40px;height: 40px;border-radius: 50%;"></image>
								</view>
								<view class="item">
									<!-- <text class="name">{{item[name]}}</text> -->
									<text class="post">{{item.nickname}}</text>
								</view>
							</label>
						</view>
					</checkbox-group>
			</scroll-view>
		</view>
		<view class="flag" v-if="index">
			<scroll-view scroll-y="true" :show-scrollbar="false" class="flag-scroll" style="width: 100%;height: 100%;">
				<view @click="toFunc(o.key)" class="flag-key" v-for="(o,i) in resource" :key="i">
					{{o.key}}
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	var WebIM = require("../../utils/WebIM")["default"];
	export default {
		props: {
			datas: {
				type: Array,
				default () {
					return [];
				}
			},
			olddatas: {
				type: Array,
				default () {
					return [];
				}
			},
			// name: {
			// 	type: String,
			// 	default () {
			// 		return "name";
			// 	}
			// },
			index: {
				type: Boolean,
				default: true
			},
			color: {
				type:String,
				default:"#f44336"
			}
		},
		data() {
			return {
				resource: [],
				chars: [],
				to: "",
				cache:[],
				items:'',
				names:[],
				hyList:[],
				owner:[],
				roomid:'',
				qid:''
			};
		},
		onLoad(option) {
			console.log(option.id)
			this.roomid = option.id
			this.qid = option.qid
			WebIM.conn.getRoster().then( (res) => {
			  console.log(res) // res.data > ['user1', 'user2']
			  let token = uni.getStorageSync('token')
			  uni.request({
			  	url: this.G_base + '/api/lz/filter',
			  	method: 'POST',
			  	header: {
			  		'content-type': 'application/x-www-form-urlencoded',
			  		'Authori-zation': 'Bearer ' + token
			  	},
			  	data:{
			  		id:option.id,
					accounts:res.data+""
			  	},
			  	success: res => {
			  		console.log(res)
					this.hyList = res.data.data
			  	}
			  })
			});
			
		},
		watch: {
			datas(r) {
				if (!(r instanceof Array)) {
					console.log("the props datas type must be array")
					return
				}
				this._parseData(r)
			}
		},
		onNavigationBarButtonTap(e) {
			let token = uni.getStorageSync('token')
			uni.request({
				url: this.G_base + '/api/lz/LaUser',
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded',
					'Authori-zation': 'Bearer ' + token
				},
				data:{
					id:this.qid,
					qy_uids:this.names+"",
					hx_id:this.roomid
				},
				success: res => {
					if(res.data.status==200){
						uni.showToast({
							title:"操作成功",
							icon:"none"
						})
						setTimeout(()=>{
							uni.navigateBack({
								
							})
						},1000)
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:"none"
						})
					}
				}
			})
			
			// if(e.float=='right'){
			// 	let option = {
			// 	    users: this.names,
			// 	    groupId: this.roomid
			// 	};
			// 	WebIM.conn.inviteToGroup(option).then((res) => {
			// 	    console.log(res)
			// 		uni.request({
			// 			url: this.G_base + '/api/lz/qltuser',
			// 			method: 'POST',
			// 			header: {
			// 				'content-type': 'application/x-www-form-urlencoded',
			// 				'Authori-zation': 'Bearer ' + token
			// 			},
			// 			data:{
			// 				id:this.qid,
			// 				qy_uids:this.names+""
			// 			},
			// 			success: res => {
			// 				if(res.data.status){
			// 					uni.showToast({
			// 						title:"操作成功",
			// 						icon:"none"
			// 					})
			// 					setTimeout(()=>{
			// 						uni.navigateBack({
										
			// 						})
			// 					},1000)
			// 				}
			// 			}
			// 		})
			// 	}).catch((error)=>{
			// 		if(error.data.error=='forbidden_op'){
			// 			uni.showToast({
			// 				title:"群员禁止拉人",
			// 				icon:'none'
			// 			})
			// 		}
			// 	})	
			// }
		},
		methods: {
			checkboxChange(e){
				this.names=e.detail.value + ""
				console.log(this.names)
			},
			getold(){
				this.datas = this.olddatas
			},
			toFunc(o) {
				this.to = o
			},
			clickFunc(item){
				this.$emit("ev",item)
			},
			inputFunc(r){ //搜索功能
			console.log(r)
				if(!r.detail.value) {
					this.resource = this.cache
					return
				}
				
				let temp = []
				this.datas.forEach((item)=>{
					if(item.nickname.indexOf(r.detail.value)!=-1){
						console.log(item)
						temp.push(item)
					}
				})
				this.datas = temp
			},
			_type(val){
				return Object.prototype.toString.call(val).slice(8,-1).toLowerCase()
			},
			_parseData(r) {
				// 生成a-z的数组
				let data = [];
				this.chars = []
				for (let i = 65; i <= 90; i++) {
					let key = String.fromCharCode(i)
					data.push({"key":key,data:[]})
					this.chars.push(key)
				}
				// if(this._type(r) === "array") {
					
				// 	// 填充数据
				// 	r.forEach(o => {
				// 		// 找到char的位置
				// 		data.forEach( (item,index) => {
				// 			let a = this._parseChar(o[this.name || 'name'])
				// 			if(item.key === a){
				// 				data[index].data.push(o)
				// 			}
				// 		})
				// 	})
				// }
				// 组合最后数据并踢出没有匹配到a-z中的任意数据
				let finalData = []
				for (let i in data) {
					if(data[i].data.length > 0){
						finalData.push(data[i])
					}
				}
				this.resource = finalData
				this.cache = finalData
				finalData = null
			},
			// _parseChar(name) {
			// 	if (Object.prototype.toString.call(name).slice(8, -1) !== 'String') {
			// 		console.error("name is not string")
			// 		return
			// 	}
			// 	let chars = pinyin.getFullChars(name);
			// 	return chars[0].toUpperCase()
			// }
		},
		mounted() {
			this._parseData(this.datas)
		}
	};
</script>

<style>
	page {
		background: #f4f4f4;
	}

	.search {
		width: 100%;
		height: 120upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.s-input {
		width: 700upx;
		height: 80upx;
		background: url('') 20upx center no-repeat #fff;
		background-size: 40upx;
		text-indent: 80upx;
	}

	.scroll {
		position: absolute;
		left: 25upx;
		top: 120upx;
		right: 100upx;
		bottom: 25upx;
	}

	.p {
		position: sticky;
		top: 0;
		left: 0;
		background: #f4f4f4;
		font-size: 28upx;
		margin-bottom: 10upx;
		text-indent: 40upx;
		z-index: 99998;
		font-weight: bold;
	}

	.info {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 10upx;
		flex-direction: row;
	}

	.icon {
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		margin-right: 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30upx;
		color: #fff;
	}

	.item {
		height: 100upx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.flag {
		width: 50upx;
		position: absolute;
		top: 120upx;
		right: 25upx;
		bottom: 25upx;
	}

	.flag-scroll {
		padding-top: 10upx;
	}

	.flag-key {
		padding: 0;
		margin: 0 auto 10upx auto;
		width: 30upx;
		height: 30upx;
		border-radius: 50%;
		color: #000;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20upx;
	}
	uni-checkbox .uni-checkbox-input{
		border-radius: 50%!important
	}
</style>
